<template>
  <a-locale-provider :locale="locale">
    <div id="app" v-if="urlflag">
      <div class="rightnav" v-if="rightflag">
        <div
          style="hight: 50px;background:#2c3e50;font-size:20px;color:#fff;padding-top:20px;padding-buttom:20px;"
        >后台管理</div>

        <div class="scroll" style="width: 109%;background:#2c3e50;">
          <!-- <a-button
            type="primary"
            :style="collapsed==false?'left: 10%':'left:79px'"
            @click="toggleCollapsed"
          >
            <a-icon style="font-size:20px;" :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
          </a-button>-->
          <a-menu
            style="max-width: 250px;position:relative;  z-index: 99; "
            mode="inline"
            theme="dark"
            @openChange="onOpenChange"
            :inlineCollapsed="collapsed"
            :openKeys="openKeys"
          >
            <a-menu-item key="0">
              <router-link to="/" tag="div">
                <a-icon type="home" />首页
                <span style="display: inline-block; width: 11px;height: 1px;"></span>
              </router-link>
            </a-menu-item>
            <a-sub-menu v-for="item in $store.state.power" :key="item.id_num">
              <span slot="title">
                <a-icon :type="item.menu_icon" />

                <router-link :to="item.menu_path" tag="span">{{item.menu_name}}</router-link>
              </span>

              <a-menu-item @click="getname" v-for="items in item.children" :key="items.id_num">
                <router-link :to="items.menu_path" tag="div">
                  <div @click="getname">{{items.menu_name}}</div>
                </router-link>
              </a-menu-item>
            </a-sub-menu>
          </a-menu>
        </div>
      </div>
      <router-view v-if="isRouterAlive" />
    </div>
  </a-locale-provider>
</template>
<script>
// import Vue from "vue";
import axios from "axios";
// Vue.prototype.axios = axios;
// axios.defaults.baseURL = "https://admin1.bearing.cn/"; //配置访问接口的
import zhCN from "ant-design-vue/lib/locale-provider/zh_CN";
import moment from "moment";
// import VueFroala from 'vue-froala-wysiwyg';

import "moment/locale/zh-cn";
import { setTimeout } from "timers";
import { log } from "util";
moment.locale("zh-cn");
const EN = "en-us";
const ZH = "zh-cn";
export default {
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      collapsed: false,
      pathname: "",
      //全局化配置
      locale: zhCN,
      language: "zh_cn", //国际化
      localeval: "zh-cn",
      isRouterAlive: true,
      urlflag: true,
      rightflag: this.$store.state.rightflag,

      openKeys: [] //默认开启那个
      //More -> https://www.froala.com/wysiwyg-editor/docs/options
    };
  },
  methods: {
    moment,
    // toggleCollapsed() {
    //   this.collapsed = !this.collapsed;
    // },
    onOpenChange(openKeys) {
      const latestOpenKey = openKeys.find(
        key => this.openKeys.indexOf(key) === -1
      );
      if (
        JSON.parse(sessionStorage.getItem("powerID")).indexOf(latestOpenKey) ===
        -1
      ) {
        this.openKeys = openKeys;
      } else {
        this.openKeys = latestOpenKey ? [latestOpenKey] : [];
      }
      this.clearsess();
    },
    getname() {
      this.pathname = this.$route.name;
      this.reload();

      sessionStorage.setItem("sqdwid", this.$store.state.bbl_sqdwid);
      sessionStorage.setItem("sub_mchid", this.$store.state.bbl_sub_mchid);
      sessionStorage.setItem("phone", this.$store.state.bbl_phone);
    },

    reload() {
      this.isRouterAlive = false;

      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    },
    clearsess() {
      var date_sess = sessionStorage.getItem("date_sess");
      var date = new Date().getTime();
      var num_date = 1000 * 60 * 60 * 2;
      var reduce_num = date - date_sess;
      if (reduce_num > num_date) {
        console.log((reduce_num - num_date) / 1000);
        sessionStorage.clear();
        alert("缓存已超时，请重新登录!");
        this.$router.push("/login");
      } else {
        console.log((reduce_num - num_date) / 1000);
      }
    }
  },
  updated() {},

  created() {
    //监听刷新页面事件方法
    // window.onbeforeunload = function(event) {
    //   console.log("刷新页面了");
    // };

    var bbl_sqdwid = this.$store.state.bbl_sqdwid;
    var bbl_sub_mchid = this.$store.state.bbl_sub_mchid;
    var bbl_phone = this.$store.state.bbl_phone;

    console.log(this.$store.state.bbl_sqdwid);
    console.log(this.$store.state.rwr);
    window.onbeforeunload = function() {
      var n = window.event.screenX - window.screenLeft;
      var b = n > document.documentElement.scrollWidth - 20;
      if ((b && window.event.clientY < 0) || window.event.altKey) {
        //页面关闭
        console.log("页面关闭");
      } else {
        console.log("页面刷新"); // 页面刷新
        this.clearsess();
        if (bbl_sqdwid != "" && bbl_sub_mchid != "" && bbl_phone != "") {
          sessionStorage.setItem("sqdwid", bbl_sqdwid);
          sessionStorage.setItem("sub_mchid", bbl_sub_mchid);
          sessionStorage.setItem("phone", bbl_phone);
        }
      }
    };
    //全局设置中文
    moment.locale(ZH);
    this.$i18n.locale = ZH;
    this.locale = zhCN;
    // 给header头里传参数--开始
    let sqdwid = this.$store.state.bbl_sqdwid;
    let phone = this.$store.state.bbl_phone;
    let token = this.$store.state.token;

    // console.log('-------------',sqdwid)
    // console.log('-------------',phone);

    axios.interceptors.request.use(
      function(config) {
        // 在发送请求之前做些什么

        // config.headers["sqdwid"] = sqdwid;
        // config.headers["phone"] = phone;
        config.headers["token"] = token;

        // console.log("执行了")
        return config;
      },
      function(error) {
        // 对请求错误做些什么

        return Promise.reject(error);
      }
    );
    // 给header头里传参数--结束
  },
  components: {
    // index
  }
};
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
body {
  // background-color: #e8eaed!important;
}
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
li {
  list-style: none;
}
#nav {
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.del {
  margin-right: 10px;
}
.cz {
  margin-right: 10px;
}
.bxred {
  color: red;
  margin-right: 5px;
}
.v-enter,
.v-leave-to {
  opacity: 0;
  transform: translateX(100%);
}
.v-enter-to,
.v-leave {
  opacity: 0.4;
  transform: translateX(0);
}
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}
.sl_style {
  color: #1890ff;
}
.jg_style {
  // color: #000;
}
.rightnav {
  position: absolute;
  top: 0;
  left: 0;
  width: 10%;
  min-height: 1000px;
  background-color: #2c3e50;
  .scroll {
    min-height: 900px;
    overflow-y: scroll;
  }
  .ant-btn-primary {
    position: fixed !important;
    top: 0;
    left: 200px;
    z-index: 999;
    height: 50px !important;
    background-color: transparent !important;
    border: 0 !important;
    i {
      color: #2c3e50;
    }
  }
}
.header_sele {
  width: 88% !important;
  z-index: 99 !important;
}
.hedlist {
  z-index: 99 !important;
}
.baocun {
  margin-right: 10px;
}

.ant-menu-dark,
.ant-menu-dark .ant-menu-sub {
  background-color: rgb(48, 65, 86) !important;
}
.ant-table-thead {
  tr {
    th {
      text-align: center !important;
    }
  }
}
.ant-table-tbody {
  tr {
    td {
      text-align: center;
    }
  }
}
.tree_node_op {
  position: absolute;
  right: 0;
  margin-top: -24px;
}
// .el-icon-document{
//   display: inline-block;
// }
.index .el-icon-document:before {
  content: "" !important;
}
.el-icon-caret-right:hover {
  color: red !important;
}
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
  background-color: #8eb8e8 !important;
  color: #000;
}
.ant-drawer-title {
  font-weight: bold !important;
  color: #409eff !important;
}
//页面统一样式
.hedlist {
  position: fixed;
  z-index: 999;
  width: 98%;
  left: 10%;
  top: 50px;
  height: 90px;
  line-height: 60px;
  background-color: #f3f7f9;
}
.bcg {
  width: 90%;
  // height: 930px;
  background-color: #f3f7f9 !important;
  position: relative;
  left: 10%;
  // overflow: hidden;
  // margin-bottom: 50px;
  min-height: 1000px;
}
.appstyle {
  width: 98% !important;
  left: 1% !important;
}
.sxkj {
  max-width: 20% !important;
}
.ant-menu-dark,
.ant-menu-dark .ant-menu-sub {
  background: #2c3e50 !important;
}
//公共的遮罩层背景色
.addnew_box {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  height: 1000px;
  z-index: 999;
  // .bjd_tit {
  //   text-align: left;
  // }
  // .ant-tabs {
  //   text-align: left;
  //   padding: 40px 40px 10px;
  // }
}


//公共的遮罩层背景色
.gl_tjwz {
  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  height: 1000px;
  z-index: 999;
}
</style>
